<template>
  <div ref="container">
    <span ref="marquee"   :style="{left:left+'px','white-space': 'nowrap'}">
      <slot></slot>
    </span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hs: this.$store.state.hs,
      left: 10
    };
  },
  props: {
    active: {
      type: Boolean,
      default: false
    },
    align: {
      type: String,
      default: "left"
    },
    scroolWidth: {
      type: [String, Number],
      default: 400
    },
    fontSize: {
      type: [String, Number],
      default: 30
    },
  },
  mounted() {
    let target = this.$refs.marquee;
    let container = target.parentNode;
    if (this.align === "left" || target.offsetWidth > container.offsetWidth) {
      this.left = 0;
    } else if (this.align === "center") {
      this.left = (container.offsetWidth - target.offsetWidth) / 2;
    } else {
      this.left = container.offsetWidth - target.offsetWidth;
    }
  },
  watch: {
    active(nVal, oVal) {
      if (nVal) {
        this.hs.scroll.scrollText(this.$refs.marquee, this.scroolWidth, this.fontSize);
      } else {
        this.hs.scroll.stopScroll(this.$refs.marquee);
      }
    }
  },
  beforeDestroy(){
    // 销毁前将活动中的滚动关闭
    if(this.active) this.hs.scroll.stopScroll(this.$refs.marquee);
  }
};
</script>
<style lang="less" scoped>
div {
  position: relative;
  height: 100%;
  overflow: hidden;
  span {
    position: absolute;
  }
}
</style>

